<template>
  <Modal
      title="表单预览"
      id="render-preview"
      v-model="visible"
      :append-to-body="true"
      :width="1000"
  >

    <Tabs v-model="active">
      <TabPane label="表单预览" name="preview">
        <form-build :formTemplate="formTemplate" :custom-components="customComponents" :config="ngConfig"
                    :models="models" ref="formPreview" v-if="formPreviewVisible"/>
      </TabPane>
      <TabPane label="表单渲染" name="render">
        <form-build style="height: 100%;" :formTemplate="formTemplate" :custom-components="customComponents"
                    :config="ngConfig" :models="models" :renderPreview="true" ref="formRender" v-if="formRenderVisible"/>
      </TabPane>
      <TabPane label="模板数据" name="templateData">
        <Input style="height: 100%;" :rows="20" type="textarea" v-model="templateData" @on-change="changeTemplateData">
        </Input>
      </TabPane>
      <TabPane label="表单数据" name="formData">
        <Input style="height: 100%;" :rows="20" type="textarea" v-model="formData" @on-change="changeFormData">
        </Input>
      </TabPane>

    </Tabs>

    <span slot="footer">
      <Button :disabled="active!=='preview'" @click="syncModel" type="info" icon="md-sync">同步</Button>
      <Button type="warning" @click="handleValidator" icon="ios-flash" :disabled="active!=='preview'">验证</Button>
      <Button @click="visible=false" icon="md-close">关闭</Button>
    </span>

  </Modal>
</template>
<script>
import FormBuild from '../build/index';

export default {
  name: 'RenderPreview',
  data() {
    return {
      templateData: '',
      formData: '',

      active: 'preview',
      visible: false,
      formRenderVisible: false,
      formPreviewVisible: false,
      formTemplate: {},
      models: {},
    };
  },
  components: {
    FormBuild,
  },
  inject: {
    customComponents: {
      from: 'customC',
      default: () => [],
    },
    ngConfig: {
      from: 'ngConfigC',
      default: () => ({}),
    },
  },
  methods: {
    init(template, models) {

      this.visible = true;
      this.$nextTick(() => {
        if (template) {
          this.formTemplate = template;
          this.templateData = JSON.stringify(this.formTemplate, null, '\t');
        } else {
          this.formTemplate = {};
          this.templateData = '';
        }

        if (models) {
          this.models = models;
          this.formData = JSON.stringify(this.models, null, '\t');
        }

        if (this.models) {
          this.formPreviewAndRender();
        }
      });

    },
    changeTemplateData(e) {
      this.formTemplate = JSON.parse(e.target.value);
      this.formPreviewAndRender();
    },
    changeFormData(e) {
      this.models = JSON.parse(e.target.value);
      this.formPreviewAndRender();
    },
    formPreviewAndRender() {
      this.formRenderVisible = false;
      this.formPreviewVisible = false;
      const model = this.models;
      this.$nextTick(() => {
        this.formRenderVisible = true;
        this.formPreviewVisible = true;
        if (model && this.$refs.formRender) {
          this.$nextTick(() => {
            this.$refs.formRender.setData(model);
            this.$refs.formPreview.setData(model);
          });
        }
      });
    },

    syncModel() {
      this.$refs.formPreview.getData()
          .then(res => {
            this.$nextTick(() => {
              this.models = res;
              this.formData = JSON.stringify(res, null, '\t');
            });
          })
          .catch(err => {
            this.$Message.error({
              background: true,
              content: '获取表单模板数据失败',
              duration: this.$config.duration,
            });
          });
    },
    handleCancel() {
      this.visible = false;
    },
    handleValidator(){
      this.$refs.formPreview.validator().then(valid=>{});
    }
  },
};
</script>
<style lang="less" scoped>
#render-preview::v-deep .ivu-tabs-content .ivu-tabs-tabpane:nth-child(n + 2) textarea  {
  height: 442px;
}

#render-preview::v-deep .ivu-tabs-content .ivu-tabs-tabpane:nth-child(n + 2) textarea::-webkit-scrollbar {
  width: 4px;
  background-color: #fff;
}

#render-preview::v-deep .ivu-tabs-content .ivu-tabs-tabpane:nth-child(n + 2) textarea::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
  background-color: #e8eaec;
}

#render-preview::v-deep .ivu-tabs-content .ivu-tabs-tabpane:nth-child(n + 2) textarea::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
  border-radius: 2px;
  background-color: #fff;
}
#render-preview::v-deep .ivu-tabs-tabpane{
  height:444px;
  overflow: auto;
  padding:2px;
}
#render-preview::v-deep .ivu-tabs-tabpane::-webkit-scrollbar {
  width: 4px;
  background-color: #fff;
}

#render-preview::v-deep .ivu-tabs-tabpane::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
  background-color: #e8eaec;
}

#render-preview::v-deep .ivu-tabs-tabpane::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
  border-radius: 2px;
  background-color: #fff;
}
</style>
